<script setup lang="ts">
const props = defineProps<{
  modelValue?:any
}>();
onMounted(()=>{
  setTimeout(()=>{
    document.querySelectorAll('input').forEach((input)=>input.removeAttribute('readonly'))
  },500)
})
</script>

<template>
  <input
      class="input"
      readonly
      :value="props.modelValue"
      @input="$emit('update:modelValue',(($event.target as HTMLInputElement).value))"
  />
</template>

<style lang="scss" scoped>
input.input{
  @apply p-2 border border-slate-300 rounded-sm outline-none
  ring-offset-2  w-full ring-pink-600 focus:ring-1 focus:border-white duration-300
  placeholder:text-sm text-gray-600;
}
</style>